<template>
  <div class="app-container">
    <el-button size="small" type="primary" @click="newReport">
      <i class="fa fa-plus"></i>新建报表
    </el-button>
    <el-button size="small" type="info" @click="customization()">
      <i class="el-icon-setting"></i>定制
    </el-button>
    <!-- <el-button size="small" type="success" @click="shareReport()">
      <i class="el-icon-share" aria-hidden="true"></i>分享
    </el-button> -->
    <el-table :data="tableData" @row-click="selectme" border style="width: 100%;margin-top: 10px">
      <!--
      <el-table-column type="selection" width="45"></el-table-column>
      -->
      <el-table-column label="" width="35" :resizable="false">
        <template slot-scope="scope">
          <el-radio v-model="checked" name="myselect" :label="scope.row.pageId">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="pageId" label="标识"></el-table-column>
      <el-table-column align="center" prop="pageName" label="报表名称"></el-table-column>
      <el-table-column align="center" prop="userName" label="创建人"></el-table-column>
      <el-table-column align="center" prop="crtDate" label="创建时间"></el-table-column>
      <el-table-column width="170" :resizable="true">
        <template slot-scope="scope">
          <el-button size="small" type="warning" title="查看" @click="viewReport(scope.row.pageId)">
            <i class="el-icon-search"></i>查看
          </el-button>
          <el-button size="small" type="danger" @click="deleteReport(scope.row.pageId)">
            <i class="el-icon-delete"></i>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="page"
      :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <portalShare ref="portalShareForm"></portalShare>
  </div>
</template>
<script>
import request from "@/utils/request"
import portalShare from "./PortalShare.vue"

export default {
  name: "portalMain",
  components: {
    portalShare
  },
  props: {},
  data() {
    return {
      total: 0,
      page: 1,
      rows: 10,
      checked: null,
      tableData: []
    }
  },

  methods: {
    handleSizeChange(v) {
      this.rows = v;
      this.loadData();
    },
    handleCurrentChange(v) {
      this.page = v;
      this.loadData();
    },
    selectme: function (a, b) {
      this.checked = a.pageId;
    },
    shareReport() {
      let ts = this;
      if (!ts.checked) {
        ts.$message({
          type: "warning",
          message: "未勾选数据",
          duration: 1000
        });
        return false;
      }
      this.$refs['portalShareForm'].share(ts.checked);
    },
    //加载列表数据
    loadData() {
      let ts = this;
      request({
        url: "/bi/portal/list",
        method: "GET",
        params: {page: ts.page, rows: ts.rows},
      }).then(resp => {
        ts.tableData = resp.rows;
        ts.total = resp.total;
      });
    },
    //查看报表详情
    viewReport(pageId) {
      this.$router.push({path: "/portal/View", query: {id: pageId}});
    },
    //编辑已有的报表
    customization() {
      let ts = this;
      if (!ts.checked) {
        ts.$message({
          type: "warning",
          message: "未勾选数据",
          duration: 1000
        });
        return false;
      }
      this.$router.push({path: "/portal/Customiz", query: {id: ts.checked}});
    },
    //删除报表
    deleteReport(pageId) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: "/bi/portal/delete",
          method: "delete",
          params: {pageId: pageId},
        }).then(resp => {
          this.$message({
            type: "success",
            message: "删除成功",
            duration: 1000
          })
          this.loadData();
        }).then(e => {
          this.$notify.error(e)
        });
      });
    },
    //新建报表
    newReport() {
      this.$router.push("/portal/Customiz");
    }
  },
  mounted() {
    this.loadData();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => vm.loadData());
  },
  watch: {},
  filters: {}
}
</script>
